<template>
  <div class="father">
    <router-link to="/">返回首页</router-link>
    <router-link to="/father">查看父组件</router-link>
    <router-link to="/big">查看大组件</router-link>
    <div class="top">
      <v-top></v-top>
    </div>
    <div class="content">
      <div class="left">
        <v-side></v-side>
      </div>
      <div class="right">
        <v-content></v-content>
      </div>
    </div>
  </div>
</template>

<script>
import vTop from "./top";
import vSide from "./side";
import vContent from "./content";
export default {
  components: {
    // 组件名： 组件内容
    vTop: vTop,
    vSide: vSide,
    vContent: vContent,
  },
};
</script>

<style>
.father .top {
  position: fixed;
  top: 20px;
  width: 100vw;
  height: 80px;
  border-bottom: 1px solid #333;
}
.content {
  width: 100vw;
  height: 100vh;
}
.left {
  float: left;
  width: 250px;
  height: 100vh;
  border-right: 1px solid #333;
  margin-top: 100px;
}
.right {
  float: left;
  height: 100vh;
  margin-top: 100px;
}
.router-link-exact-active {
  color: red;
}
</style>